<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
		<style>
		</style>
	</head>
	<body>
		<h4 id="first-element-introduction">
			多步骤连续介绍
		</h4>
		<p id="second-element-introduction">你可以使用driver.js创建多个步骤去介绍功能，只需要提供一个多个节点的步骤数组就可以了。</p>
		<p id="third-element-introduction">下面是一个快速的示例，向您展示如何在介绍中使用多个步骤。</p>
		<p id="four-element-introduction">下面是一个快速的示例，向您展示如何在介绍中使用多个步骤。</p>
		<a id="official" href="https://driverjs.com/docs/installation">driverjs官方</a>
		<button id="clickShowBtn">点击显示</button>

		<script>
			// console.log(driver);
			const driverFn = driver.js.driver;
			const driverObj = driverFn({
				showProgress: true,
				showButtons: ['next', 'previous'],
				steps: [{
						element: '#clickShowBtn',
						popover: {
							title: '点击显示按钮实例',
							description: '点击显示按钮实例的描述示例',
							side: "left",
							align: 'start'
						}
					},
					{
						element: '#first-element-introduction',
						popover: {
							title: '这是标题哦！',
							description: '你可以使用driver.js创建多个步骤去介绍功能，只需要提供一个多个节点的步骤数组就可以了。',
							side: "bottom",
							align: 'start'
						}
					},
					{
						element: '#second-element-introduction',
						popover: {
							title: 'driver.js',
							description: '你可以使用driver.js创建多个步骤去介绍功能，只需要提供一个多个节点的步骤数组就可以了。',
							side: "bottom",
							align: 'start'
						}
					},
					{
						element: '#third-element-introduction',
						popover: {
							title: '这是描述',
							description: '下面是一个快速的示例，向您展示如何在介绍中使用多个步骤。',
							side: "left",
							align: 'start'
						}
					},
					{
						element: '#four-element-introduction',
						popover: {
							title: '这是描述2',
							description: '下面是一个快速的示例，向您展示如何在介绍中使用多个步骤。2',
							side: "top",
							align: 'start'
						}
					},
					{
						element: '#official',
						popover: {
							title: '这是官方',
							description: '这是官方去driverjs官网的地址',
							side: "right",
							align: 'start'
						}
					},
				]
			});
			clickShowBtn.onclick = () => {
				driverObj.drive();
			}
		</script>
	</body>
</html>